<template>
	<div id="Edit">
		<toptitle :conter="'修改收货地址'" :right="'删除'" @rightBtn="del()"></toptitle>

		<div class="content">
			<h3>基本信息</h3>
			<ul>
				<li>
					<span>姓名</span>
					<input type="text" placeholder="收货人姓名" v-model="arr.name">
				</li>
				<li>
					<span>电话</span>
					<input type="text" placeholder="收货人手机号" v-model="arr.phone">
				</li>
				<li>
					<van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区"
						@click="show = true" />
					<van-popup v-model="show" round position="bottom">
						<van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
							@finish="onFinish" :field-names="{text:'name',value:'adcode',children:'districts'}" />
					</van-popup>
				</li>
				<li>
					<span>详细地址</span>
					<input type="text" placeholder="街道门牌、楼层房间号等信息" v-model="arr.a_desc">
				</li>
			</ul>
			<ul>
				<li>
					<span>设为默认收货地址</span>
					<van-switch v-model="arr.is_select" />
				</li>
			</ul>
			<button class="preserve" @click="preserve">保存</button>
		</div>
	</div>
</template>

<script>
	// 修改用户信息
	import {
		getAddressDesc,
		editAddress,
		deleteAddressDesc
	} from "@/api/user"
	// 引入顶部栏组件
	import toptitle from "@/components/top_title.vue"
	import citys from "@/assets/js/citys"
	export default {
		components: {
			// 注册顶部栏组件
			toptitle,
		},
		data() {
			return {
				address_id: 0,
				show: false,
				fieldValue: '',
				cascaderValue: '',
				// 选项列表，children 代表子选项，支持多级嵌套
				options: citys.districts[0].districts,

				// 需要提交给后端的数据
				arr: {
					name: '',
					phone: '',
					a_city: '',
					a_code: '',
					a_provice: '',
					a_desc: '',
					is_select: 0
				}
			};
		},

		created() {
			// 获取到动态路由匹配的id
			this._load(this.$route.params.id)
			this.address_id = this.$route.params.id;
			console.log(this.address_id)

		},


		methods: {
			// 全部选项选择完毕后，会触发 finish 事件
			onFinish({
				selectedOptions
			}) {
				this.show = false;
				this.fieldValue = selectedOptions.map((option) => option.name).join('/');
			},
			// 获取地址信息
			_load(address_id) {
				getAddressDesc({
					address_id
				}).then(res => {
					if (res.data.code == 1) {
						this.arr = res.data.result[0];
						this.fieldValue = `${this.arr.a_provice}/${this.arr.a_city}/${this.arr.a_code}`
					}
				})
			},
			// 保存
			preserve() {
				// 判断数据
				if (
					this.arr.name.length < 1 ||
					!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.arr.phone) ||
					this.fieldValue.length < 1 ||
					this.arr.a_desc.length < 1
				) {
					this.$Message.error('必填值不能为空');
					return
				}
				// 先确保前端处理的数据没问题
				this.arr.is_select = Number(this.arr.is_select);
				this.arr.a_provice = this.fieldValue.split('/')[0];
				this.arr.a_city = this.fieldValue.split('/')[1];
				this.arr.a_code = this.fieldValue.split('/')[2];
				this.arr.address_id = this.arr.ID;
				// console.log(this.obj)
				// 提交数据
				editAddress(this.arr).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						this.$Message.success('修改成功');
						setTimeout(() => {
							this.$router.back()
						}, 800)
					}
				})
			},
			// 删除
			del() {
				this.$Modal.confirm({
					// 显示提示框的标题
					title: '退出登录？',
					// 提示框的内容
					content: `<p>删除后将无法恢复，确认删除吗?</p>`,
					// 点击确认按钮后要发生的事件
					onOk: () => {
						// 删除
						deleteAddressDesc({
							address_id: this.address_id
						}).then(res => {
							if (res.data.code == 1) {
								this.$Message.success('删除成功');
								setTimeout(() => {
									this.$router.back();
								}, 800)
							} else {
								this.$Message.error(res.data.msg);
								setTimeout(() => {
									this.$router.back();
								}, 800)
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#Edit {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
		padding-top: 44 * $width;

		.content {
			width: 90%;
			margin: 20 * $width 5%;

			h3 {
				margin: 10 * $width 0;
				font-weight: 400;
			}

			ul {
				width: 100%;
				padding: 10 * $width;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10 * $width;

				li {
					padding: 0 16 * $width;
					width: 100%;
					display: flex;
					height: 44 * $width;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1 * $width solid #eee;

					input {
						height: 90%;
						width: 220 * $width;
						border: none;
						outline: none;
					}

					// 修改input placeholder样式
					input::-webkit-input-placeholder {
						/* WebKit, Blink, Edge */
						color: #cccccc;
					}

					input:-moz-placeholder {
						/* Mozilla Firefox 4 to 18 */
						color: #cccccc;
					}

					input::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: #cccccc;
					}

					input::-ms-input-placeholder {
						/* Internet Explorer 10-11 */
						color: #cccccc;
					}
				}

				li:nth-of-type(3) {
					padding: 0;
					margin-top: 3 * $width;


				}

				li:nth-of-type(4) {
					border: none;
				}
			}

			ul:nth-of-type(2) {
				margin-top: 15 * $width;

				li {
					border: none;
				}
			}

			.preserve {
				width: 90%;
				height: 44 * $width;
				margin: 40 * $width 5% 0 5%;
				background-color: #3286ff;
				border: none;
				border-radius: 22 * $width;
				color: #fff;
				font-size: 16 * $width;
			}
		}
	}
</style>
